<div class="section gf-form-group">
  <h5 class="section-heading">
    Event/Animation Mappings
    <info-popover mode="right-normal">
      <span ng-bind-html="$GF.popover('Select the objects to event', 'EVENTS', 'all_events_ani')">
      </span>
    </info-popover>
  </h5>
  <div class="gf-form">
    <span class="gf-form-label width-11">Identify by
      <info-popover mode="right-normal">
        <span ng-bind-html="$GF.popover('Select the type of data in field \'What\' ID (uniq) or LABEL', 'EVENTS')">
        </span>
      </info-popover>
    </span>
    <!-- ID INPUT -->
    <div class="gf-form-select-wrapper">
      <select class="gf-form-input width-10" ng-model="rule.data.eventProp"
        ng-options="c.value as c.text for c in editor.propTypes" ng-change="editor.onRulesChange()"></select>
    </div>
  </div>
  <div class="gf-form">
    <!-- ID Regular expression -->
    <gf-form-switch class="gf-form" label="Regular exression" label-class="width-11" checked="rule.data.eventRegEx"
      on-change="editor.onRulesChange()"
      tooltip="Disable this option if you don't use regular expressions in field 'What' below to improve performance">
    </gf-form-switch>
  </div>
  <!-- Table -->
  <table>
    <!-- Header -->
    <thead>
      <tr>
        <th>
          <label class="gf-form-label width-7" style="margin-right: 2px;">Buttons</label>
        </th>
        <th>
          <label class="gf-form-label width-8" style="margin-right: 2px;">What
            <info-popover mode="right-normal">
              <span ng-bind-html="$GF.popover('Enter shape Id or click on link button', 'EVENTS')">
              </span>
            </info-popover>
          </label>
        </th>
        <th>
          <label class="gf-form-label width-6" style="margin-right: 2px;">When
            <info-popover mode="right-normal">
              <span ng-bind-html="$GF.popover('Select level state to apply event on shape.', 'EVENTS')">
              </span>
            </info-popover>
        </th>
        <th>
          <label class="gf-form-label width-10" style="margin-right: 2px;">Action
            <info-popover mode="right-normal">
              <span ng-bind-html="$GF.popover('Select action type', 'EVENTS')">
              </span>
            </info-popover>
          </label>
        </th>
        <th>
          <label class="gf-form-label width-8" style="margin-right: 2px;">Value
            <info-popover mode="right-normal">
              <span ng-bind-html="$GF.popover('Select value for this action', 'EVENTS')">
              </span>
            </info-popover>
          </label>
        </th>
      </tr>
    </thead>
    <tbody ng-mouseleave="editor.unhighlightAllCells()">
      <tr ng-repeat="event in rule.getEventMaps()" ng-class="{'gf-form-disabled': event.data.hidden}"
        ng-mouseleave="editor.unselectCell(rule.data.eventProp,event.data.pattern)"
        ng-mouseover="editor.selectCell(rule.data.eventProp,event.data.pattern)">
        <td>
          <div class="gf-form">
            <label class="gf-form-label" style="margin-right: 4px;">
              <i class="fa fa-w fa-remove pointer" bs-tooltip="'Delete this mapping object'"
                ng-click="editor.removeEventMap(rule,$index);editor.onRulesChange()"></i>
            </label>
            <label class="gf-form-label" ng-if="!event.isHidden()" style="margin-right: 4px;">
              <i class="fa fa-w fa-eye pointer" bs-tooltip="'Hide selected object graph in rule'"
                ng-click="event.hide();editor.onRulesChange()"></i>
            </label>
            <label class="gf-form-label" ng-if="event.isHidden()" style="margin-right: 4px;">
              <i class="fa fa-w fa-eye-slash pointer" bs-tooltip="'show selected object graph in rule'"
                ng-click="event.show();editor.onRulesChange()"></i>
            </label>
            <label class="gf-form-label" style="margin-right: 4px;" ng-hide="editor.flowchartHandler.isMapping(event)">
              <i class="fa fa-link pointer" ng-click="editor.flowchartHandler.setMap(event, rule.data.eventProp)"
                bs-tooltip="'Link it on object graph'"></i>
            </label>
            <label class="gf-form-label" style="margin-right: 4px;color:orange"
              ng-show="editor.flowchartHandler.isMapping(event)">
              <i class="fa fa-unlink pointer" bs-tooltip="'Cancel link object graph selection'"
                ng-click="editor.flowchartHandler.unsetMap()"></i>
            </label>
          </div>
        </td>
        <td>
          <div class="gf-form">
            <input type="text" style="margin-right: 2px;" id="{{ event.getId() }}" placeholder="id or regex of shape"
              class="gf-form-input width-8" ng-model="event.data.pattern" ng-if="rule.data.eventProp === 'id'"
              bs-tooltip="'Specify regex using /my.*regex/ syntax or complete id of shape (see inspect tab)'"
              bs-typeahead="editor.getCellNamesById" ng-blur="editor.onRulesChange()" data-min-length="0"
              data-items="100" ng-model-onblur data-placement="right" />
            <input type="text" style="margin-right: 2px;" id="{{ event.getId() }}" placeholder="id or regex of shape"
              class="gf-form-input width-8" ng-model="event.data.pattern" ng-if="rule.data.eventProp === 'value'"
              bs-tooltip="'Specify regex using /my.*regex/ syntax or complete id of shape (see inspect tab)'"
              bs-typeahead="editor.getCellNamesByValue" ng-blur="editor.onRulesChange()" data-min-length="0"
              data-items="100" ng-model-onblur data-placement="right" />
          </div>
        </td>
        <td>
          <select convert-to-number class="gf-form-input width-6" ng-model="event.data.eventOn"
            ng-change="editor.onRulesChange()">
            <option type="number" ng-value="-1">All</option>
            <option type="number" ng-repeat="color in rule.data.colors" ng-value="$index">{{$index}}</option>
          </select>
        </td>
        <td>
          <select class="gf-form-input width-10" ng-model="event.data.style"
            ng-options="c.value as c.text for c in editor.EventType" ng-change="editor.onRulesChange()">
          </select>
        </td>
        <td>
          <div class="gf-form">
            <input type="text" style="margin-right: 2px;" placeholder="{{event.getPlaceHolder()}}"
              class="gf-form-input width-8" ng-model="event.data.value" bs-tooltip="'Specify value for this action'"
              bs-typeahead="editor.getEventValues" data-min-length="0" data-items="100"
              ng-focus="editor.onEventValue(event)" ng-blur="editor.onRulesChange()" data-min-length="0"
              data-items="100" ng-model-onblur data-placement="right" />
          </div>
        </td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>
          <div class="gf-form">
            <label class="gf-form-label">
              <i class="fa fa-plus pointer" ng-click="rule.addEventMap('')" style="margin-right: 2px;"></i>
            </label>
          </div>
        </td>
      </tr>
    </tfoot>
  </table>
</div>